<template>
  <van-nav-bar title="创作" left-text="返回" left-arrow @click-left="onClickLeft" fixed />
  <div class="box">
    <div class="box-artical-img"><van-uploader v-model="state.fileList" multiple max-count="9" /></div>
    <div class="box-artical-title">
      <van-cell-group inset>
        <van-field label="作品标题" placeholder="请输入标题" v-model="state.title" />
      </van-cell-group>
    </div>
    <div class="box-artical-content">
      <van-cell-group inset>
        <van-field v-model="state.message" rows="3" autosize  type="textarea" maxlength="666" placeholder="分享你的生活，找到更多志同道合的人"
          show-word-limit />
      </van-cell-group>
    </div>
  </div>
  
  <div class="select-option">
    <van-cell title="3D模型" is-link />
    <van-cell title="所在位置" is-link />
    <van-cell title="所有人可见" is-link />
  </div>
  <div class="upload">
    <div class="upload-left"><div><van-icon name="orders-o" size="20" /></div>草稿箱<div></div></div>
    <div class="upload-right"><van-button type="primary" class="button" @click="publish">发布</van-button></div>
  </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue'
import { useRoute } from 'vue-router'
import { showSuccessToast } from 'vant';
import axios from '@/api'
const route = useRoute()
const userId = route.query.userId
// console.log(userId);


const state = reactive({
  fileList:[],
  title:'',
  message:'',
  head:'',
  userName:'',
  picId:'',
  detailId:''

})

onMounted(async()=>{
  try {
    const { data } = await axios.get('users/userdata',{
      params:{
        userId : userId
      }
    })
    // console.log(data);
    state.head = data[0].head
    state.userName = data[0].userName
    state.picId = data[0].picId
    state.detailId = data[0].detailId
  } catch (error) {
    console.log(error)
  }
})
const publish = () =>{
  
  try {
    const res = axios.post('/users/writepic',{
      picId : state.picId,
      pic_1 : state.fileList.slice(0,1),

    })
    if(res.code === '80000'){
    showSuccessToast(res.msg);
    }
  } catch (error) {
    console.log(error);
  }
  try {
    const res = axios.post('/users/writerec',{
      userId: userId,
      userName: state.userName,
      userProfilePhoto: state.fileList.slice(0,1),
      userSignature: state.title,
      picId: state.picId,
      detailId: state.detailId,
      serachKey: state.title.slice(0,4)
    })
    if(res.code === '80000'){
    showSuccessToast(res.msg);
    }
  } catch (error) {
    console.log(error);
  }
  try {
    const res = axios.post('/users/writedet',{
      detailId: state.detailId,
      title:  state.title,
      content: state.message,
      userId: userId
    })
    if(res.code === '80000'){
    showSuccessToast(res.msg);
    }
  } catch (error) {
    console.log(error);
  }
}

const onClickLeft = () => history.back()
</script>

<style lang="less" scoped>
.box {
  
  padding: 1.25rem 0.125rem;
}
.select-option{
  .content{
    padding: 0.5rem;
  }
}
.upload{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  .upload-left{
    margin-left: 0.3rem;
    text-align: center;
    
    
  }
 .upload-right{
  
  flex: 1;
  margin-left: 1rem;
  margin-right: 1rem;
  .button {
    width: 100%!important;
  }

 }
}
</style>